<template>
<div>
   <div class="container">
       <div class="relative-box relative-left"></div>
       <div class="">
           <div class="relative-box relative-center"></div>
       </div>
       </div>
       <div class="container-flex">
           <div class="relative-box"></div>
       </div>
   </div>
</template>
<script>
export default {
    data() {  
    },
    methods:{
    }
}
</script>
<style scoped>
      .container{
          position: relative;
          height: 100px;
      }
      .relative-box{
          position: absolute;
          border: 1px solid black;
          width: 100px;
          height: 100px;
          background: red;
      }
      .relative-left{
          left: 100px;
      }
      .relative-center{
          left: 50%;
          margin-left: -50px;
      }
      .container-flex{
          display: flex;
          justify-content: center;
          height: 100px;
      }
       
</style>